use crate::i18n::supported_languages;
use leptos::prelude::*;

/// Language Selector Component
/// Provides a dropdown for language selection
#[component]
#[must_use]
pub fn UiLanguageSelector(
    #[prop(optional)] class: Option<String>,
    current_language: Signal<String>,
    on_language_change: Callback<String>,
) -> impl IntoView {
    let base = "relative inline-block text-left";
    let class = class.map_or_else(|| base.to_string(), |c| format!("{base} {c}"));

    let languages = supported_languages();

    view! {
        <div class=class>
            <select
                class="bg-black/20 dark:bg-gray-900/20 backdrop-blur-md border border-white/20 rounded-md py-1 pl-3 pr-8 text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none cursor-pointer"
                on:change=move |ev| {
                    let selected = event_target_value(&ev);
                    on_language_change.run(selected);
                }
                prop:value=move || current_language.get()
            >
                {languages.into_iter().map(|(code, name)| {
                    view! {
                        <option value=code class="bg-gray-800 text-white">
                            {name}
                        </option>
                    }
                }).collect::<Vec<_>>()}
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-white">
                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                    <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
                </svg>
            </div>
        </div>
    }
}
